/*
 * MainButton : BaseButton 主页按钮，继承自按钮基类
 */
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15


Item {
    id: root
    /* property 定义开始 */
    property bool isEnable: true
    property int mainWidth: 93
    property int mainHeight: 70
    property int btnRadius: 8
    property string startColor: isEnable ? "#8C97ED" : "#CCC"
    property string endColor: isEnable ? "#0018D1" : "#444"

    property int iconSize: 30

    property url labelPath: ""
    property url disabledLabelPath: ""
    property string showText: "--Default--"
    property string fontFamily: "Alibaba PuHuiTi"
    property string fontColor: "#fff"
    property string disabledFontColor: "#999"

    property var mobileDevice: ["android", "ios"] // 不带鼠标的设备
    property var pc_otherDevice: ["windows", "linux"] // 带鼠标的设备
    // 目前使用上边方法判断是否带鼠标（不准确）
    property bool hoverEnable: (mobileDevice.indexOf(Qt.platform.os) === -1) ? true : false

    signal entered();
    signal exited();
    signal pressed();
    signal released();
    /* property 定义结束 */

    BaseButton {
        // 按钮
        id: mainbtn
        btnWidth: mainWidth
        btnHeight: mainHeight
        btnIsClip: true
        // btnRadius: btnRadius // 无效
        btnColor: 'transparent'
        isEnable: isEnable
        btnBorderWidth: 0
        btnBorderColor: "transparent"

        // 图标
        btnIconWidth: iconSize
        btnIsIconSquare: true
        btnIconPath: labelPath
        disabledBtnIconPath: disabledLabelPath
        isSvg: true // 为svg图片格式

        // 文字
        btnIsLabelFillWidth: true
        btnFontFamily: fontFamily
        btnFontPixelSize: 14
        btnText: showText
        btnFontColor: fontColor
        disabledBtnTextColor: disabledFontColor
        btnTextElideMode: Text.ElideRight

        // 父元素的clip后加radius，由于性能原因，子元素radius不生效，则增加遮盖层处理
        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: Rectangle {
                width: mainWidth
                height: mainHeight
                radius: btnRadius
            }
        }

        // 按钮背景
        Rectangle {
            id: btnBackground
            width: parent.width
            height: parent.height / 2 * 3
            y: 0
            state: "default"
            z: -1
            LinearGradient {
                id: btnGradient
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(0, height)
                gradient: Gradient {
                    GradientStop {position: 0.0; color: startColor}
                    GradientStop {position: 0.5; color: endColor}
                    GradientStop {position: 1.0; color: startColor}
                }
            }
            states: [
                State {
                    name: "default"
                    PropertyChanges {
                        target: btnBackground
                        y: 0
                    }
                },
                State {
                    name: "hover"
                    PropertyChanges {
                        target: btnBackground
                        y: -btnBackground.height / 3
                    }
                }
            ]
            transitions: [
                Transition {
                    from: "default"
                    to: "hover"
                    NumberAnimation {
                        targets: btnBackground
                        property: "y"
                        duration: 40
                    }
                },
                Transition {
                    from: "hover"
                    to: "default"
                    NumberAnimation {
                        target: btnBackground
                        property: "y"
                        duration: 40
                    }
                }
            ]
        }

        MouseArea {
            enabled: isEnable
            anchors.fill: parent
            hoverEnabled: hoverEnable
            cursorShape: isEnable ? Qt.PointingHandCursor : Qt.ArrowCursor // 指针变为小手图标
            onEntered: {
                // console.log("悬停")
                btnBackground.state = "hover"
                root.entered()
            }
            onExited: {
                // console.log("离开")
                btnBackground.state = "default"
                root.exited()
            }
            onPressed: function(mouse){
                // console.log("按下")
                btnBackground.state = "hover"
                root.pressed()
            }
            onReleased: {
                // console.log("释放")
                btnBackground.state = "default"
                root.released()
            }
        }
    }
}
